import React from 'react';
import { Modal } from 'antd';
import cass from 'classnames';
import s from './index.module.less';
import Avatar from '../Avatar';
import isSuccess from '../../utils/error';
import userServer from '../../services/user';

const { getUserInfo } = userServer;

const items = [
    { label: '性别', key: 'gender', render: v => ['未知', '男', '女'][v + 1] },
    { label: '公司', key: 'company' },
    { label: '所在地', key: 'address' },
    { label: '个性签名', key: 'signature' },
];

export function UserDetail({ info }) {
    return (
        <>
            <div className={cass(s.item, s.top)}>
                <div>{info.realname || ''}</div>
                <Avatar username={info.realname} headimage={info.headimage} />
            </div>
            {items.map(v => (
                <div className={s.item} key={v.key}>
                    <div className={s.left}>{v.label}</div>
                    <div className={s.right}>{v.render ? v.render(info[v.key]) : (info[v.key] || '')}</div>
                </div>
            ))}
        </>
    )
}

export default class MemberItem extends React.Component {

    state = {
        show: false,
        detail: {}
    }

    onClick = async () => {
        const { onClick, canViewInfo, data } = this.props;
        if (canViewInfo) { // 点击点击查看详情
            const res = await getUserInfo({ userid: data.userid });
            if (isSuccess(res)) {
                this.setState({ show: true, detail: res.data })
            }
            return;
        }
        onClick && onClick();
    }

    render() {
        const { data, onContextMenu, color, borderColor, canViewInfo } = this.props;
        const { username, ishost, ismanager, headimage } = data;
        const { show, detail } = this.state;
        return (
            <div className={s.wrap}>
                <div
                    className={cass('mainColor', s.logo)}
                    onClick={this.onClick}
                    onContextMenu={onContextMenu ? onContextMenu : null}
                >
                    <Avatar
                        headimage={headimage}
                        username={username}
                        color={color || 'userColor'}
                        borderColor={borderColor || 'userBorderColor'}
                    />
                    <div className={s.wrapIcon}>
                        {ishost ? <span className="mdi mdi-flag warnColor" /> : null}
                        {ismanager ? <span className={cass('mdi mdi-star', s.star)} /> : null}
                    </div>
                </div>
                <div className={cass(s.text, { [s.hidden]: typeof username !== 'string' })}>{username}</div>
                {canViewInfo ? (
                    <Modal
                        title="用户详情"
                        visible={show}
                        footer={null}
                        width={400}
                        onOk={this.handleOk}
                        onCancel={() => this.setState({ show: false })}
                        wrapClassName={s.wrapModal}
                    >
                        <div>
                            <UserDetail info={detail} />
                        </div>
                    </Modal>
                ) : null}
            </div>
        )
    }
}